<template>
  <div>
    <div class="page-body" v-loading="loading">
      <data-view v-model="dataList" v-model:searchValue="searchValue" :header-btn="['search', 'add']"
        :current-page="currentPage" :page-size="pageSize" :total="dataTotal" :delete-before="deleteBefore"
        @search="onSearch" @click-add="openModalView()" @delete-submit="onDeleteSubmit()"
        @update:current-page="onUpdateCurrentPage" @dblclick="openModalView">

        <template #content="{ dataItem }">
          <cmp-card style="width:300px;margin:5px" :card-data="dataItem">
            <template #footer>
              <div style="display: flex;justify-content: flex-end;">
                <el-button size="small" @click="openBizUserModalView(dataItem)">关联员工</el-button>
                <el-button plain type="primary" size="small" @click="openModalView(dataItem)">门店详情</el-button>
              </div>
            </template>
          </cmp-card>
        </template>
        <!-- <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" width="50" label="#" />
        <el-table-column prop="Name" label="名称">
          <template #="{ row }">
            <div class="page-rowimg">
              <img :src="row._logo" alt="" srcset="">
              {{ row.Name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-link type="primary" @click="openModalView(row)" v-if="menuActionType.update">修改</el-link>
          </template>
        </el-table-column> -->

      </data-view>
    </div>

    <!-- 公司详情 -->
    <form-modal-view v-if="isShowFormModalView" ref="formModalViewRef" @submit="getData()"
      @close="isShowFormModalView = false"></form-modal-view>

    <!-- 关联员工 -->
    <biz-user-modal-view v-if="isShowBizUserModalView" ref="bizUserModalViewRef"
      @close="isShowBizUserModalView = false"></biz-user-modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Cmp",
})
</script>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import { ElMessageBox } from "element-plus";
import DataView from "@/components/DataView";
import { docType, CmpDataClass } from "@/model/Cmp";
import FormModalView from "./CmpModalView.vue";
import { queryGet } from "@/utils/api";
import { request } from "@/utils/axios";
import { appState } from "@/store/app"
import { getPanelUxBtn, getMenuAction } from "@/utils/bus";
import CmpCard from "./CmpCard.vue"
import BizUserModalView from "./CmpBizUserModalView.vue"

let menuActionType = ref(getMenuAction("Cmp"))
let menuActionArray = ref(getPanelUxBtn("Cmp"))
let dataList = ref<CmpDataClass[]>([]);

/**
 * 搜索内容
 */
let searchValue = ref("");

/**
 * 数据总数量
 */
let dataTotal = ref(0);

/**
 * 当前页数
 */
let currentPage = ref(1);

/**
 * 每页数据数量
 */
let pageSize = ref(25);

/**
 * 加载数据
 */
let loading = ref(false);

/**
 * 弹框是否展示
 */
let isShowFormModalView = ref(false)

/**
 * 弹框组件
 */
let formModalViewRef = ref();

/**
 * 当点击搜索的时候 
 */
function onSearch() {
  currentPage.value = 1;
  getData();
}

/**
 * 当前页面更新
 */
function onUpdateCurrentPage(count: number) {
  currentPage.value = count;
  //重新加载数据
  getData();
}

/**
 * 删除之前
 */
function deleteBefore(selectList: CmpDataClass[]): Promise<void> {
  return new Promise((resolve, reject) => {
    console.log(selectList);
    ElMessageBox.confirm("确定要进行删除操作吗", "提示", {
      type: "warning"
    })
      .then(() => {
        return Promise.all(selectList.map((item) => {
          return request("/" + docType + "/Delete", {
            UnionGuid: item.UnionGuid,
            Id: item.Id
          }, {
            state: item.UnionGuid
          })
        }))
      })
      .then(() => {
        resolve();
      })
      .catch(reject)
  })
}

/**
 * 当删除成功的时候
 */
function onDeleteSubmit() {
  //重新获取数据
  getData();
}

/**
 * 获取数据
 */
function getData() {
  loading.value = true;
  dataList.value = [];
  queryGet({
    docType: docType,
    actionType: "PageList",
    apiType: "PageList"
  }, {
    Searchv: searchValue.value,
    Start: currentPage.value,
    Limit: pageSize.value
  })
    .then((res) => {
      dataList.value = res.List.map((item: any) => {
        return new CmpDataClass(item);
      })
      dataTotal.value = res.Total;
    })
    .finally(() => {
      loading.value = false;
    })
}

/**
 * 打开弹框 
 */
function openModalView(row?: CmpDataClass) {
  isShowFormModalView.value = true;
  nextTick(() => {
    formModalViewRef.value.show(row);
  })
}

/**
 * ====================
 *  关联员工
 * ====================
 */

/**
 * 弹框是否展示
 */
let isShowBizUserModalView = ref(false)

/**
 * 弹框组件
 */
let bizUserModalViewRef = ref();

/**
 * 打开弹框 
 */
function openBizUserModalView(row?: CmpDataClass) {
  isShowBizUserModalView.value = true;
  nextTick(() => {
    bizUserModalViewRef.value.show(row);
  })
}


/**
 * ====================
 *  页面初始化
 * ====================
 */
getData();
</script>

<style lang="less" scoped>
.page-body {
  height: 100%;
  width: 100%;
}

.page-rowimg {
  display: flex;
  align-items: center;

  >img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>